<script setup>
import {inject, onMounted, reactive, ref} from "vue";
import {useDark, useToggle} from '@vueuse/core';
import {gsap} from "gsap"
import {ScrollTrigger} from "gsap/ScrollTrigger";
import {ElMessage} from "element-plus";

const echarts = inject("echarts");

// ========================= resources =========================
const isDark = useDark()
const toggleDark = useToggle(isDark)

const homepage = ref();
const nowFlag = reactive({
  dark: false,
  light: true
})
// 菜单栏的每一个按钮
const home = ref()
const about = ref()
const projects = ref()
const skills = ref()
const experience = ref()
const plan = ref()
const skillTree = ref()

nowFlag.dark = localStorage.getItem('vueuse-color-scheme') === 'dark'
nowFlag.light = localStorage.getItem('vueuse-color-scheme') !== 'dark'

const skillsData = [
  "Java", "Spring", "Spring MVC", "MyBatis", "MyBatis-plus", "Spring Boot", "Spring security", "Spring Data", "Swagger", "Shiro", "",
  "Nuxt", "Vue2", "Vue3", "VueX", "VueRouter", "Pinia", "Node", "Tailwind", "UnoCss", "Element UI", "AntdV", "UniApp", "",
  "Linux", "Shell", "Nginx", "Git", "Github", "Maven", "",
  "MySql", "Redis", "",
]
const projectData = [
  {
    "entryName": "井字棋⌨️",
    "summary": "一个简单的井字棋小游戏， 通过原生的JS ",
    "skills": ["Vue", "UnoCss", "Naive", "SpringBoot", "Mybatis", "Redis"],
    "imageUrl": "C:\\Users\\Victor.Hu\\Desktop\\YunSenLvLi\\yun-sen-lv-li\\src\\assets\\images\\home\\typing-speed.png"
  },
  {
    "entryName": "打字测验⌨️",
    "summary": "一个打字速度测试应用。敲击即开始打字，计时结束后将显示总敲击单词数、正确率、错误率等。该应用UI简洁现代，支持Dark Mode切换。",
    "skills": ["Vue", "UnoCss", "Naive", "SpringBoot", "Mybatis", "Redis"],
    "imageUrl": "C:\\Users\\Victor.Hu\\Desktop\\YunSenLvLi\\yun-sen-lv-li\\src\\assets\\images\\home\\project.jpg"
  },
  {
    "entryName": "打字测验⌨️",
    "summary": "一个打字速度测试应用。敲击即开始打字，计时结束后将显示总敲击单词数、正确率、错误率等。该应用UI简洁现代，支持Dark Mode切换。",
    "skills": ["Vue", "UnoCss", "Naive", "SpringBoot", "Mybatis", "Redis"],
    "imageUrl": "C:\\Users\\Victor.Hu\\Desktop\\YunSenLvLi\\yun-sen-lv-li\\src\\assets\\images\\home\\typing-speed.png"
  }
]
const znch_data = ['A Full Stack Developer', 'An optimistic person', 'Young man named Victor.Hu']

// ========================= Method =========================
//  底部进行主题的切换
const changeStaTUS = (status) => {
  toggleDark()
  nowFlag.dark = !nowFlag.dark
  nowFlag.light = !nowFlag.light
}

const toTop = () => {
  // document.documentElement.scrollTop = 0;
  const scrollTop = document.documentElement.scrollTop
  if (scrollTop > 0) {
    // document.documentElement.requestAnimationFrame(scrollTop)
    // document.documentElement.scrollTo(0, scrollTop - scrollTop / 8)
    document.documentElement.scrollTop = 0
  }
}

// 进行文字的复制
const copyToClipboard = (value) => {
  navigator.clipboard.writeText(value).then(() => {
    ElMessage.success({
      grouping: true,
      message: 'Copy Success'
    })
  }).catch(err => {
    ElMessage.error({
      grouping: true,
      message: 'Copy Error !'
    })
  });
}

// 切换点击状态
const getNowMenuItemValue = (element, type) => {
  // //  循环遍历处理吧
  //  if (element !== home.value){
  //    home.value.style.backgroundColor = ""
  //  }
  //  if (element !== about.value){
  //    about.value.style.backgroundColor = ""
  //  }
  //  if (element !== projects.value){
  //    projects.value.style.backgroundColor = ""
  //  }
  //  if (element !== skills.value){
  //    skills.value.style.backgroundColor = ""
  //  }
  //  if (element !== experience.value){
  //    experience.value.style.backgroundColor = ""
  //  }
  //  if (element !== plan.value){
  //    plan.value.style.backgroundColor = ""
  //  }
  //  // 将新点击的染色
  //  element.style.backgroundColor = "#fff"
}
//
const getNowSkill = (value) => {
  console.log(value)
}

// 进行动画的加载
onMounted(() => {
  // GSAP 动画
  gsap.registerPlugin(ScrollTrigger)
  //  有点不好就是 有的时候会上下抖动
  const horizontalSections = gsap.utils.toArray("section.horizontal");
  horizontalSections.forEach(function (sec, i) {
    var thisPinWrap = sec.querySelector(".pin-wrap");
    var thisAnimWrap = thisPinWrap.querySelector(".animation-wrap");

    var getToValue = () => -(thisAnimWrap.scrollWidth - window.innerWidth);

    gsap.fromTo(
        thisAnimWrap,
        {
          x: () => (thisAnimWrap.classList.contains("to-left") ? getToValue() : 0)
        },
        {
          x: () => (thisAnimWrap.classList.contains("to-left") ? 0 : getToValue()),
          ease: "none",
          scrollTrigger: {
            trigger: sec,
            scroller: document.body,
            pinType: "transform",
            start: 'top 20%',
            end: () => "+=" + thisAnimWrap.scrollWidth,
            pin: thisPinWrap,
            invalidateOnRefresh: true,
            anticipatePin: 1,
            scrub: true,
          },
          onStart: () => {
            // console.log("open")
          },
          onComplete: () => {
            // console.log("close")
          }
        }
    );
  })

  // echarts 图表
  const treeData = {
    name: '',
    children: [
      {
        name: 'back-end',
        children: [
          {name: 'Java'},
          {name: 'Spring'},
          {name: 'Spring MVC'},
          {name: 'MyBatis'},
          {name: 'MyBatis-plus'},
          {name: 'Spring Boot'},
          {name: 'Spring security'},
          {name: 'Swagger'},
          {name: 'Shiro'},
          {name: '......'},
        ]
      },
      {
        name: 'font-end',
        children: [
          {name: 'Html'},
          {name: 'Css'},
          {name: 'JavaScript'},
          {name: 'Nuxt'},
          {name: 'Vue2'},
          {name: 'Vue3'},
          {name: 'VueX'},
          {name: 'VueRouter'},
          {name: 'Pinia'},
          {name: 'Node'},
          {name: 'Tailwind'},
          {name: 'UnoCss'},
          {name: 'Element UI'},
          {name: 'AntdV'},
          {name: 'UniApp'},
          {name: '......'},
        ]
      },
      {
        name: 'Sql',
        children: [
          {name: 'MySQL'},
          {name: 'Redis'},
        ]
      },
      {
        name: 'Other',
        children: [
          {name: 'Linux'},
          {name: 'Shell'},
          {name: 'Nginx'},
          {name: 'Git'},
          {name: 'Github'},
          {name: 'Maven'},
          {name: '......'},
        ]
      },
      {
        name: '',
        children: [
          {name: ''},
          {name: ''},
          {name: ''},
          {name: ''},
          {name: ''},
          {name: ''},
          {name: '......'},
        ]
      }
    ]
  };
  var treeOption = {
    tooltip: {
      trigger: 'item',
      triggerOn: 'mousemove'
    },
    series: [
      {
        type: 'tree',
        data: [treeData],
        top: '1%',
        left: '7%',
        bottom: '1%',
        right: '20%',
        symbolSize: 7,
        label: {
          position: 'top',
          verticalAlign: 'middle',
          align: 'left',
          fontSize: 12
        },
        leaves: {
          label: {
            position: 'right',
            verticalAlign: 'middle',
            align: 'left'
          }
        },
        emphasis: {
          focus: 'descendant'
        },
        expandAndCollapse: true,
        animationDuration: 550,
        animationDurationUpdate: 750
      }
    ]
  }
  echarts.init(skillTree.value, "light").setOption(treeOption);

})
</script>
<template>
  <div ref="homepage" class="homePage box-border select-none ">
    <!-- background -->
    <div class="h5000 w100% absolute bg-sun dark:bg-line"></div>
    <!-- floating bar -->
    <div v-motion
         :enter="{scale: 1,opacity: 1,y: 0,}"
         :initial="{scale: 0.8,opacity: 0,y: -150,}"
         :duration="110"
         class="fixed flex top-30 justify-center w-full z-100 "
    >
      <div class="w800 h-50 rounded-26px border-white bg-white/40 backdrop-blur-5px shadow-lg flex justify-around items-center
        dark:bt-1px_solid_#4f586c dark:bg-#3f4450/20 dark:shadow-#525B70FF "
      >
        <a ref="home"
           class="py8 px-20 box-border text-center rounded-20  dark:text-#fff dark:hover:bg-#3a4254 hover:bg-#fff/90 transition home animation"
           href="#home" @click="getNowMenuItemValue(home,'home') "> Home
        </a>
        <!--<div-->
        <!--    class="py8 px-20 box-border text-center rounded-20  dark:text-#fff dark:hover:bg-#3a4254 hover:bg-#fff/90 transition about animation"-->
        <!--    ref="about" @click="getNowMenuItemValue(about,'about')"> About-->
        <!--</div>-->
        <a ref="projects"
           class="py8 px-20 box-border text-center rounded-20  dark:text-#fff dark:hover:bg-#3a4254 hover:bg-#fff/90 transition projects animation"
           href="#projects" @click="getNowMenuItemValue(projects,'projects')"> Projects
        </a>
        <a ref="skills"
           class="py8 px-20 box-border text-center rounded-20  dark:text-#fff dark:hover:bg-#3a4254 hover:bg-#fff/90 transition skills animation"
           href="#skills" @click="getNowMenuItemValue(skills,'skills')"> Skills
        </a>
        <a ref="experience"
           class="py8 px-20 box-border text-center rounded-20  dark:text-#fff dark:hover:bg-#3a4254 hover:bg-#fff/90 transition experience animation"
           href="#experience" @click="getNowMenuItemValue(experience,'experience')"> Experience
        </a>
        <a ref="plan"
           class="py8 px-20 box-border text-center rounded-20  dark:text-#fff dark:hover:bg-#3a4254 hover:bg-#fff/90 transition plan animation"
           href="#other" @click="getNowMenuItemValue(plan,'plan')"> Other
        </a>
      </div>
    </div>
    <!-- 头像 -->
    <div id="home">
      <div class="h150"></div>
      <div v-motion-pop-visible class="w120 h120 ma">
        <img alt="" class="w120 h120 rounded-50% bd-5px_solid_#FFF dark:bd-5px_solid_#d8da8f"
             src="@/assets/images/home/blueRed.png">
        <div v-motion
             :initial="{
                rotate: -3,
              }"
             :visible="{
                rotate: -20,
                transition: {
                  repeat: 7,
                  repeatType: 'mirror',
                },
              }"
             class="w50 h50 text-60 absolute -top-5 -left-10"
        >
          <span class="absolute -top-40 -left-40 cursor-default">👋</span>
        </div>
        <!--<div class="absolute -z-10 -top-65 -right-20 rotate-25 text-65">👑</div>-->
      </div>
    </div>
    <!-- 打字机效果的自我介绍 -->
    <div v-motion
         :enter="{scale: 1,opacity: 1,y: 0,}"
         :initial="{scale: 0.8,opacity: 0,y: 180,}"
         :duration="110"
         class="box-border mt-8 text-#000 cursor-default dark:text-#eee"
    >
      <div class="text-30 w650 ma text-center font-bold font-[Aleo-R]">Hello, I'm</div>
      <div class="text-50 mt-8 w680 ma font-bold font-[Aleo-R]">
        <vuetyped :backDelay="1000" :loop="true" :strings="[...znch_data]">
          <div class="typing"/>
        </vuetyped>
      </div>
      <div class="w900 mt-20 ma text-30 text-center font-[Aleo-R] font-200 relative">
        with 3 years of experience. I appreciate the diversity and aesthetic appeal of front-end design, and I
        particularly value the rigorous logic of back-end development
      </div>
    </div>
    <!-- 个人简历下载以及联系方式 -->
    <div v-motion :duration="110"
         :enter="{scale: 1,opacity: 1,y: 0,}"
         :initial="{scale: 0.8,opacity: 0,y: 180,}"
         class="flex justify-around ma w-400 mt-40"
    >
      <div class="w200 h40 line-height-40 text-center bg-#eee rounded-20 hover:scale-110 transition cursor-pointer">
        <span>Download CV</span>
        <n-icon>
          <svg class="icon" height="10" p-id="4300" t="1715268642212" version="1.1"
               viewBox="0 0 1024 1024" width="10" xmlns="http://www.w3.org/2000/svg">
            <path
                d="M314.94144 800.0512h399.36v40.96h-399.36zM776.54016 433.664l-28.95872-28.95872-218.46016 218.48064V182.96832h-40.96v434.76992L267.6736 397.27104l-28.95872 28.95872 272.65024 272.62976z"
                fill="" p-id="4301"></path>
          </svg>
        </n-icon>
      </div>
      <div
          class="w40 h40 line-height-40 rounded-20 bg-#eee flex justify-center items-center hover:scale-110 transition cursor-pointer outline-none">
        <n-tooltip placement="top-start" trigger="hover">
          <template #trigger>
            <svg class="icon" height="30" p-id="5341" t="1715270092064" version="1.1"
                 viewBox="0 0 1024 1024" width="30" xmlns="http://www.w3.org/2000/svg">
              <path
                  d="M873.202 776.004c39.796-36.367 63.946-84.144 63.946-136.467 0-91.062-73.137-168.335-174.607-195.706-6.052-145.915-154.579-262.711-336.947-262.711-186.21 0-337.163 121.764-337.163 271.968 0 68.974 31.833 131.953 84.293 179.895 16.417 15.003-2.804 56.059-26.417 89.977 39.906-11.022 82.471-18.196 119.732-18.196 17.445 0 33.731 1.575 48.03 5.062 34.908 9.865 72.437 15.231 111.523 15.231 7.591 0 15.12-0.225 22.589-0.624 40.125 71.599 129.444 121.424 233.191 121.424 29.65 0 58.123-4.069 84.603-11.556 10.848-2.646 23.199-3.84 36.435-3.84 28.265 0 60.556 5.443 90.83 13.804-17.91-25.73-32.492-56.871-20.037-68.255zM425.595 675.377c-33.675 0-66.651-4.494-98.011-13.359l-0.866-0.244-0.874-0.214c-17.618-4.299-37.738-6.478-59.801-6.478-12.681 0-25.347 0.699-37.732 1.888 2.629-29.109-8.524-48.277-22.071-60.659-21.881-19.995-38.877-42.477-50.515-66.818-11.687-24.446-17.616-50.153-17.616-76.405 0-57.328 28.506-111.892 80.265-153.645 26.429-21.317 57.391-38.117 92.023-49.934 36.391-12.417 75.15-18.711 115.199-18.711s78.807 6.295 115.199 18.711c34.633 11.815 65.594 28.617 92.023 49.934 46.193 37.262 73.845 84.732 79.261 135.26 0.001 0 0.001 0 0.002 0-10.069-0.971-20.314-1.486-30.708-1.486-141.263 0-255.777 92.371-255.777 206.321 0 12.21 1.326 24.174 3.847 35.803-0.001-0.002-0.001-0.002-0.001-0.004-1.285 0.014-2.565 0.041-3.847 0.041zM839.686 739.338c-8.029 7.34-18.617 20.825-20.541 41.932-5.547-0.315-11.14-0.489-16.737-0.489-17.695 0-33.914 1.769-48.207 5.257l-0.874 0.214-0.867 0.242c-22.731 6.427-46.646 9.683-71.089 9.683-29.06 0-57.162-4.561-83.52-13.551-24.941-8.51-47.2-20.576-66.153-35.865-36.388-29.353-56.429-67.431-56.429-107.222 0-39.795 20.041-77.874 56.429-107.226 18.955-15.29 41.211-27.355 66.153-35.865 26.358-8.993 54.46-13.552 83.52-13.552s57.161 4.561 83.519 13.552c24.942 8.512 47.201 20.576 66.154 35.865 36.388 29.351 56.428 67.43 56.428 107.226 0 18.112-4.101 35.873-12.19 52.789-8.162 17.069-20.138 32.887-35.596 47.011zM277.639 399.92c0.27-28.671 18.21-51.777 40.304-51.777 22.26 0 40.306 23.46 40.306 52.398 0 28.94-18.045 52.398-40.306 52.398-22.094 0-40.033-23.107-40.302-51.744zM487.295 399.92c0.27-28.671 18.21-51.777 40.302-51.777 22.259 0 40.305 23.46 40.305 52.398 0 28.94-18.045 52.398-40.305 52.398-22.092 0-40.032-23.107-40.301-51.744zM580.218 601.195c0.27-22.034 14.074-39.763 31.061-39.763 17.156 0 31.065 18.08 31.065 40.384 0 22.304-13.908 40.384-31.065 40.384-16.988 0-30.791-17.729-31.061-39.73zM729.874 601.195c0.27-22.034 14.074-39.763 31.062-39.763 17.156 0 31.067 18.08 31.067 40.384 0 22.304-13.909 40.384-31.067 40.384-16.989 0-30.794-17.729-31.062-39.73z"
                  fill="#272636" p-id="5342"></path>
            </svg>
          </template>
          <img class="w90 bd-5px_solid_#FFF my-3" src="@/assets/images/home/QRCode.png">
          <!--<p class="w100 text-12">Please indicate the purpose in visit</p>-->
          <!--<p class="w100 text-12">请说明来意哦~</p>-->
        </n-tooltip>
      </div>

      <div
          class="w40 h40 line-height-40 rounded-20 bg-#eee flex justify-center items-center hover:scale-110 transition cursor-pointer outline-none">
        <n-tooltip placement="top-start" trigger="hover">
          <template #trigger>
            <svg class="icon" height="30" p-id="7280" t="1715271945408" version="1.1"
                 viewBox="0 0 1024 1024" width="30" xmlns="http://www.w3.org/2000/svg">
              <path
                  d="M104.9 233.1v557.8H919V233.1H104.9z m715.2 46L512 484.4 203.9 279.1h616.2zM150.9 744.9V299L512 539.6 873.1 299v445.9H150.9z"
                  p-id="7281"></path>
            </svg>
          </template>
          <p>2946267808@qq.com</p>
          <n-button size="tiny" type="primary" @click="copyToClipboard('2946267808@qq.com')">Click to copy</n-button>
          <!--<p class="w100 text-12">请说明来意哦~</p>-->
        </n-tooltip>
      </div>

      <div
          class="w40 h40 line-height-40 rounded-20 bg-#eee flex justify-center items-center hover:scale-110 transition cursor-pointer outline-none">
        <n-tooltip placement="top-start" trigger="hover">
          <template #trigger>
            <svg class="icon" height="30" p-id="8309" t="1715272709926" version="1.1"
                 viewBox="0 0 1024 1024" width="30" xmlns="http://www.w3.org/2000/svg">
              <path
                  d="M204.8 586.688c32-4.288 64-12.8 96-23.488 38.4-14.912 81.088-4.288 110.976 23.488l27.712 27.712c70.4-44.8 110.176-102.4 172.8-172.8l-27.712-27.712C556.8 384 546.176 341.312 561.088 302.912c10.688-29.824 19.2-61.824 23.488-96 6.4-51.2 51.2-89.6 104.512-89.6h108.8c32 0 59.776 12.8 78.976 34.176 19.2 21.312 29.824 51.2 27.712 81.024-12.8 117.376-53.312 230.4-117.312 328.576a728.64 728.64 0 0 1-228.288 228.224c-98.112 64-211.2 104.576-328.512 117.376h-8.576c-25.6 0-51.2-10.688-70.4-27.776a106.88 106.88 0 0 1-34.112-76.8v-108.8C113.088 640 153.6 595.2 204.8 586.688z m-25.6 106.624v108.8c0 10.688 4.288 23.488 12.8 29.888 8.576 8.512 19.2 10.688 29.888 10.688 106.688-10.688 211.2-49.088 300.8-106.688a697.792 697.792 0 0 0 209.088-209.088c57.6-89.6 96-194.112 106.688-300.8 0-10.624-2.176-23.424-10.688-32a42.112 42.112 0 0 0-29.888-12.8h-108.8c-21.312 0-38.4 14.976-40.512 34.176a479.424 479.424 0 0 1-27.712 108.8c-6.4 14.912-2.176 32 8.512 42.624l46.912 46.976c10.688 10.624 12.8 25.6 4.288 38.4a628.096 628.096 0 0 1-230.4 230.4 35.84 35.84 0 0 1-38.4-4.288L364.8 631.488a39.232 39.232 0 0 0-42.688-8.576c-36.288 12.8-72.512 21.376-108.8 27.776-19.2 2.112-34.112 19.2-34.112 42.624 0-2.112 0-2.112 0 0z"
                  p-id="8310"></path>
            </svg>
          </template>
          <p>153xxxx7263</p>
          <n-button size="tiny" type="primary" @click="copyToClipboard('153xxxx7263')">Click to copy</n-button>
          <!--<p class="w100 text-12">请说明来意哦~</p>-->
        </n-tooltip>
      </div>
    </div>
    <div class="ma w500 text-center mt-8 text-10 cursor-default">
      Please indicate the purpose in visit
      <!--<p class="w100 text-12">请说明来意哦~</p>-->
    </div>
    <!-- Project -->
    <div id="projects"></div>
    <div class="mt-150">
      <!-- 项目 计划点击进去展示 思维导图(架构) 技术点 难点 个人心得 笔记 -->
      <div v-for="(item,index) in projectData" :key="index"
           v-motion-pop-visible
           :style="index%2===0?'flex-direction: row':'flex-direction: row-reverse'"
           class="w670 h400 ma rounded-5 bd-1px_solid_#edeef0 mb-20px bg-#fff flex justify-between p30 box-border overflow-hidden cursor-pointer
                   dark:bg-#eee"
           @click="console.log('---')"
      >
        <div class="w40% h-full text-#59626f flex flex-col justify-between">
          <div class="text-#090909 text-25 font-bold">{{ item.entryName }}</div>
          <div class="mt-8 text-15 text-#232b36">{{ item.summary }}</div>
          <ul class="mt-a flex flex-wrap justify-items-revert">
            <li v-for="(skill,index) in item.skills" :key="index"
                class="h25 line-height-20 text-#fff box-border rounded-20 text-10 bg-#2c2c2cff inline-block m-2 px-10 py-2
                        dark:text-#fff dark:bg-#3f4450">
              {{ skill }}
            </li>
          </ul>
        </div>
        <img v-motion
             :duration="110"
             :hovered="{
                rotate: index%2 ===0 ?-2:2,
                scale: 1.1
              }"
             :initial="{
                rotate: 0,
                scale: 1
              }"
             :style="index%2===0?'left:350px':'right:350px'"
             :visible="{
                rotate: 0,
                scale: 1
              }"
             class="-z-10 h-full absolute top-30 rounded-8"
             src="@/assets/images/home/typing-speed.png"
        >
      </div>
    </div>
    <!-- 底部的切换按钮 -->
    <div
        class="fixed flex-col right-60 bottom-120px z-100 bg-#f9fafb bd-1px_solid_#e1e2e2 box-border pa10 shadow-inset  rounded-5 dark:bd-1px_solid_#ccc dark:bg-#111827"
    >
      <!-- 主题切换 -->
      <div v-if="nowFlag.dark" class="hover:scale-120 animation cursor-pointer" @click="changeStaTUS()">
        <svg class="icon" height="20" p-id="1679" t="1715150398528"
             viewBox="0 0 1024 1024" width="20" xmlns="http://www.w3.org/2000/svg">
          <path
              d="M512 853.333333a341.333333 341.333333 0 1 1 341.333333-341.333333 341.333333 341.333333 0 0 1-341.333333 341.333333z m0-640a298.666667 298.666667 0 1 0 298.666667 298.666667 298.666667 298.666667 0 0 0-298.666667-298.666667zM512 1024a21.333333 21.333333 0 0 1-21.333333-21.333333v-106.666667a21.333333 21.333333 0 0 1 42.666666 0v106.666667a21.333333 21.333333 0 0 1-21.333333 21.333333z"
              fill="#ffffff" p-id="1680"></path>
          <path
              d="M512 149.333333a21.333333 21.333333 0 0 1-21.333333-21.333333V21.333333a21.333333 21.333333 0 0 1 42.666666 0v106.666667a21.333333 21.333333 0 0 1-21.333333 21.333333zM165.12 880.213333a21.333333 21.333333 0 0 1-15.146667-36.266666L225.493333 768A21.333333 21.333333 0 0 1 256 768a21.333333 21.333333 0 0 1 6.186667 15.146667 21.333333 21.333333 0 0 1-6.186667 14.933333L180.053333 874.666667a21.333333 21.333333 0 0 1-14.933333 5.546666zM783.573333 261.76a21.333333 21.333333 0 0 1-21.333333-21.333333 21.333333 21.333333 0 0 1 6.186667-14.933334l75.52-75.52a21.333333 21.333333 0 0 1 30.08 0 21.333333 21.333333 0 0 1 0 30.08L798.506667 256a21.333333 21.333333 0 0 1-14.933334 5.76zM128 533.333333H21.333333a21.333333 21.333333 0 0 1 0-42.666666h106.666667a21.333333 21.333333 0 0 1 0 42.666666zM1002.666667 533.333333h-106.666667a21.333333 21.333333 0 0 1 0-42.666666h106.666667a21.333333 21.333333 0 0 1 0 42.666666zM240.426667 261.76a21.333333 21.333333 0 0 1-14.933334-6.186667L149.333333 180.053333A21.333333 21.333333 0 0 1 149.333333 149.333333a21.333333 21.333333 0 0 1 30.08 0L256 225.493333a21.333333 21.333333 0 0 1 6.186667 14.933334 21.333333 21.333333 0 0 1-21.333334 21.333333zM858.88 880.213333a21.333333 21.333333 0 0 1-14.933333-6.186666L768 798.506667a21.333333 21.333333 0 0 1-6.186667-14.933334A21.333333 21.333333 0 0 1 768 768a21.333333 21.333333 0 0 1 30.08 0l75.52 75.52a21.333333 21.333333 0 0 1-15.146667 36.266667z"
              fill="#ffffff" p-id="1681"></path>
        </svg>
      </div>
      <div v-else class="dark:bg-#111827 hover:scale-120 animation cursor-pointer" @click="changeStaTUS()">
        <svg class="icon" height="20" p-id="2322" t="1715155525135"
             viewBox="0 0 1024 1024" width="20" xmlns="http://www.w3.org/2000/svg">
          <path
              d="M525.266728 1024a512 512 0 0 1 0-1024h32.067369a26.947368 26.947368 0 0 1 21.557895 40.151579A404.210526 404.210526 0 0 0 929.477255 646.736842a400.437895 400.437895 0 0 0 50.661052-3.503158 26.947368 26.947368 0 0 1 24.252632 9.701053 26.947368 26.947368 0 0 1 4.581053 26.947368A512 512 0 0 1 525.266728 1024z m-13.20421-970.105263a458.105263 458.105263 0 1 0 431.157895 646.736842H929.477255A458.105263 458.105263 0 0 1 512.062518 53.894737z"
              p-id="2323"></path>
        </svg>
      </div>
      <div class="bt-1px_solid_#000 dark:bt-1px_solid_#fff my-10"/>
      <!--  回到顶部 -->
      <div v-if="nowFlag.dark" class="hover:scale-120 animation cursor-pointer" @click="toTop()">
        <svg class="icon" height="20" p-id="8468" t="1715656464605" version="1.1"
             viewBox="0 0 1024 1024" width="20" xmlns="http://www.w3.org/2000/svg">
          <path
              d="M533.333333 554.666667h-42.666666a106.666667 106.666667 0 0 0-106.666667 106.666666v106.666667a106.666667 106.666667 0 0 0 106.666667 106.666667h42.666666a106.666667 106.666667 0 0 0 106.666667-106.666667v-106.666667a106.666667 106.666667 0 0 0-106.666667-106.666666z m64 213.333333c0 35.328-28.672 64-64 64h-42.666666c-35.328 0-64-28.672-64-64v-106.666667c0-35.328 28.672-64 64-64h42.666666c35.328 0 64 28.672 64 64v106.666667zM853.333333 554.666667h-106.666666v320h42.666666v-106.666667h64c58.922667 0 106.666667-47.744 106.666667-106.666667s-47.744-106.666667-106.666667-106.666666z m0 170.666666h-64v-128h64a64.021333 64.021333 0 0 1 0 128zM64 597.333333h106.666667v277.333334h42.666666V597.333333h106.666667v-42.666666H64zM531.797333 155.584a21.312 21.312 0 0 0-30.165333 0c-0.32 0.32-0.448 0.768-0.725333 1.109333l-0.192-0.192-195.690667 191.082667-0.064 0.042667-0.042667 0.064-1.813333 1.770666 0.384 0.384a21.056 21.056 0 0 0 1.429333 27.925334 21.077333 21.077333 0 0 0 27.946667 1.472l0.405333 0.405333 183.104-178.794667 172.565334 176.96a21.333333 21.333333 0 1 0 30.165333-30.186666l-187.306667-192.042667z"
              fill="#ffffff" p-id="8469"></path>
        </svg>
      </div>
      <div v-else class="hover:scale-120 animation cursor-pointer" @click="toTop()">
        <svg class="icon" height="20" p-id="8468" t="1715656464605" version="1.1"
             viewBox="0 0 1024 1024" width="20" xmlns="http://www.w3.org/2000/svg">
          <path
              d="M533.333333 554.666667h-42.666666a106.666667 106.666667 0 0 0-106.666667 106.666666v106.666667a106.666667 106.666667 0 0 0 106.666667 106.666667h42.666666a106.666667 106.666667 0 0 0 106.666667-106.666667v-106.666667a106.666667 106.666667 0 0 0-106.666667-106.666666z m64 213.333333c0 35.328-28.672 64-64 64h-42.666666c-35.328 0-64-28.672-64-64v-106.666667c0-35.328 28.672-64 64-64h42.666666c35.328 0 64 28.672 64 64v106.666667zM853.333333 554.666667h-106.666666v320h42.666666v-106.666667h64c58.922667 0 106.666667-47.744 106.666667-106.666667s-47.744-106.666667-106.666667-106.666666z m0 170.666666h-64v-128h64a64.021333 64.021333 0 0 1 0 128zM64 597.333333h106.666667v277.333334h42.666666V597.333333h106.666667v-42.666666H64zM531.797333 155.584a21.312 21.312 0 0 0-30.165333 0c-0.32 0.32-0.448 0.768-0.725333 1.109333l-0.192-0.192-195.690667 191.082667-0.064 0.042667-0.042667 0.064-1.813333 1.770666 0.384 0.384a21.056 21.056 0 0 0 1.429333 27.925334 21.077333 21.077333 0 0 0 27.946667 1.472l0.405333 0.405333 183.104-178.794667 172.565334 176.96a21.333333 21.333333 0 1 0 30.165333-30.186666l-187.306667-192.042667z"
              fill="#020202" p-id="8469"></path>
        </svg>
      </div>
    </div>
    <div id="skills"></div>
    <!--  skills -->
    <div class="overflow-hidden relative">
      <div class="h550 w800 ma rounded-5 mt-150">
        <div class="text-center text-30 dark:text-#ECECECFF ">My Skills</div>
        <div class="text-center text-#aaa text-12 mt dark:text-#ECECECFF ">You Can Try To Click To View Details</div>
        <ul class=" text-20 mt-35 flex justify-center flex-wrap ">
          <li v-for="(item,index) in skillsData" :key="index"
              v-motion
              :initial="{
              opacity: 0,
              y: 100,
              scale: 0,
            }"
              :style="item===''?'width: 800px !important;height: 0px !important;background: rgba(255,255,255,0.1);padding: 0 !important;margin: 0 !important':''"
              :visible-once="{
              opacity: 1,
              y: 0,
              scale: 1,
              transition: {
                delay: 25 * index,
              },
            }"
              class="bg-#eeeeee rounded-xl py-5px px-10 m8 flex text-[#282e48ff] justify-center items-center inline-block dark:bg-#29303d dark:text-#ECECECFF cursor-pointer"
              @click="getNowSkill(item)"
          >
            {{ item }}
          </li>
        </ul>
      </div>
      <!-- skill 底部 树形展示-->
      <div ref="skillTree"
           class="h750 w-750 ma absolute top-100 right-20 -z-10 bg-#fff/1 backdrop-blur-1px display-[none]"></div>
    </div>

    <!--  My Experience  但是会上下跳动 -->
    <div id="experience" class="w-full mt-100 ping-flag">
      <section class="overflow-hidden overflow-x-hidden horizontal">
        <div id="pinThis-0" class="flex relative z-10 h-600 pin-wrap">
          <div id="animateThis-0" class="flex relative z-10 h-600PX animation-wrap">
            <div class="relative box-border p-80 w-550 h-600PX bg-#f9fafb/0"></div>
            <div v-motion-slide-visible-top
                 class="relative box-border px-40 py-50 w-500 h-500PX rounded-40 mx-3 bg-[#ffb3b3ff] ">
              <div class="text-25 font-200 ma font-[openSans]">My Experience ➜ College</div>
              <div class="h360 overflow-scroll scroll-bar line-height-30 text-20 mt-8 font-[openSans]">
                <!--
                原文
                In 2019, I began my college life.
                Driven by my passion for computers and a childhood fascination with programming, I chose a computer science major.
                During my time at school, I actively participated in the Internet plus competition and secured second place in my group.
                However, I was not content with this achievement. I believed that advancing programming skills held greater significance.
                Unfortunately, the COVID-19 pandemic struck.
                During the pandemic, everyone was online learning from home. Sometimes, listening to online lectures did not fulfill my curiosity, so I took the initiative to self-study outside of class hours. Leveraging my newly acquired knowledge, I established my first blog. Although it seems quite poor now, the pandemic situation improved in 2021.
                Upon returning to school, I immersed myself in research laboratories and collaborated on off-campus projects under my advisor.
                Subsequently, I was admitted to Hohai University at the end of my junior year.
                -->
                <br>😀In 2019, I began my college life .
                <br>Driven by my passion for computers and a childhood fascination with programming, I chose a computer
                science major.
                <br>During my time at school, I actively participated in the Internet plus competition and secured
                second place in my group☀.
                <br>However, I was not content with this achievement. I believed that advancing programming skills💻 held
                greater significance.
                <br>Unfortunately, the COVID-19 pandemic struck 😷.
                <br>During the pandemic, everyone was online learning from home. Sometimes, listening to online lectures
                did not fulfill my curiosity, so I took the initiative to self-study outside of class hours. Leveraging
                my newly acquired knowledge, I established my first blog. Although it seems quite poor now, the pandemic
                situation improved in 2021.
                <br>Upon returning to school, I immersed myself in research laboratories and collaborated on off-campus
                projects under my advisor.
                <br>Subsequently, I was admitted to Hohai University at the end of my junior year.👏
              </div>
            </div>
            <div v-motion-slide-visible-top
                 class="relative box-border px-40 py-50 w-500 h-500PX rounded-40 mx-3 bg-[#ffd0b3ff] ">
              <div class="text-25 font-200 ma font-[openSans]">My Experience ➜ University</div>
              <div class="h360 overflow-scroll scroll-bar line-height-30 text-20 mt-8 font-[openSans]">
                <!--
                原文
                In 2019, I began my college life.
                Driven by my passion for computers and a childhood fascination with programming, I chose a computer science major.
                During my time at school, I actively participated in the Internet plus competition and secured second place in my group.
                However, I was not content with this achievement. I believed that advancing programming skills held greater significance.
                Unfortunately, the COVID-19 pandemic struck.
                During the pandemic, everyone was online learning from home. Sometimes, listening to online lectures did not fulfill my curiosity, so I took the initiative to self-study outside of class hours. Leveraging my newly acquired knowledge, I established my first blog. Although it seems quite poor now, the pandemic situation improved in 2021.
                Upon returning to school, I immersed myself in research laboratories and collaborated on off-campus projects under my advisor.
                Subsequently, I was admitted to Hohai University at the end of my junior year.
                -->
                <br>My undergraduate life 🥰 was intertwined with my work, as I was able to pursue my degree while also
                working .
                <br>Initially, I spent most of my time working😶, and it was only after entering the workforce that I
                realized the knowledge gained in school was inadequate for my job responsibilities 😟.
                <br>Consequently, I have been continuously enhancing my skills and gaining experience in my work.
                <br>As of now, I am capable of independently developing projects, covering aspects of front-end and
                back-end development and operations👊🏻.
                <br>Nonetheless, I recognize that there is no limit to my potential, and I am committed to becoming even
                stronger💪🏻.
              </div>
            </div>
            <div v-motion-slide-visible-top
                 class="relative box-border px-40 py-50 w-500 h-500PX rounded-40 mx-3 bg-[#fff2b3ff] ">
              <div class="text-25 font-200 ma font-[openSans]">My Experience ➜ Working</div>
              <div class="h360 overflow-scroll scroll-bar line-height-30 text-20 mt-8 font-[openSans]">
                <!--
                原文
                  My initial job was at a small company specializing in MES ERP and IQS, with a total staff of just 16.
                  It was here that I met my first life mentor, who came from a larger company and provided me with invaluable guidance, covering code submission standards, workflow processes, and numerous life lessons.
                  After over a year of service, the company unexpectedly offered me a position in Henan for on-site development, but I was hesitant to relocate that far away, especially since the project wasn't aligned with my career goals.
                  The company offered to let me resign if I declined the offer, prompting me to end my initial employment.
                  Throughout my time at work, I consistently assessed and assessed my job responsibilities.
                  Although very unwilling, the insights gained were priceless.
                -->
                <br>My initial job was at a small company specializing in MES ERP and IQS, with a total staff of just
                16👀.
                <br>It was here that I met my first life mentor👨‍🏫, who came from a larger company and provided me with
                invaluable guidance, covering code submission standards, workflow processes, and numerous life lessons.
                <br>After over a year of service, the company unexpectedly offered me a position in Henan for on-site
                development, but I was hesitant to relocate that far away😭😭, especially since the project wasn't aligned
                with my career goals.
                <br>The company offered to let me resign if I declined the offer, prompting me to end my initial
                employment🤬.
                <br>Throughout my time at work, I consistently assessed and assessed my job responsibilities 📚.
                <br>Although very unwilling, the insights gained were priceless😌.
              </div>
            </div>
            <div v-motion-slide-visible-top
                 class="relative box-border px-40 py-50 w-500 h-500PX rounded-40 mx-3 bg-[#e1ffb3ff] ">
              <div class="text-25 font-200 ma font-[openSans]">My Experience ➜ Working</div>
              <div class="h360 overflow-scroll scroll-bar line-height-30 text-20 mt-8 font-[openSans]">
                <!--
                  So, I started my second job, also with a small company, where I learned significantly more than at my previous one.
                  During this phase, I mastered Uniapp development and became more adept at backend technologies.
                  I was solely responsible for both the front-end and back-end at this company, which had a profound impact on my seamless front-end to back-end integration.
                -->
                🍕So, I started my second job, also with a small company, where I learned significantly more than at my
                previous one.
                <br>During this phase, I mastered Uniapp development and became more adept at backend technologies.💯
                <br>I was solely responsible for both the front-end and back-end at this company, which had a profound
                impact on my seamless front-end to back-end integration.🧜‍♂️
                <br>Unexpectedly, the company encountered financial issues, which prevented my salary from being paid
                properly. 💴
                <br>At the end of the year, they privately negotiated with me and offered to pay half a month's
                compensation. So, I lost my job again😭
              </div>
            </div>
            <div v-motion-slide-visible-top
                 class="relative box-border px-40 py-50 w-500 h-500PX rounded-40 mx-3 bg-[#b3ffb7ff] ">
              <div class="text-25 font-200 ma font-[openSans]">My Experience ➜ Working</div>
              <div class="h360 overflow-scroll scroll-bar line-height-30 text-20 mt-8 font-[openSans]">
                Fortunately, when I was preparing to look for a job at the beginning of the new year 🚩, I suddenly saw a
                very interesting boss online 📱.
                <br>He was very enthusiastic and confident about the future, and he was very serious about his work, so
                I felt that it must be a good company 👍🏻.
                <br>So I contacted him through social media, but I neglected to prepare for the interview and went for
                the interview. But, the situation was not ideal in the end.
                <br>However, I heard from him that their company's technology was very advanced, so in line with his
                enthusiasm for technology, I embarked on a journey of continuous cultivation.
                <br>I love programming 💖. At this company, I saw that the technology they usually use is something I
                have not been involved in before. Therefore, I Excitement
              </div>
            </div>
            <div v-motion-slide-visible-top
                 class="relative box-border px-40 py-50 w-500 h-500PX rounded-40 mx-3 bg-[#85a5f8ff] ">
              <div class="text-25 font-200 ma font-[openSans]">To Be Continued ...</div>
            </div>
            <div v-motion-slide-visible-top
                 class="relative box-border px-40 py-50 w-500 h-500PX rounded-40 mx-3 bg-[#c898ffff] ">
              <div class="text-25 font-200 ma font-[openSans]">To Be Continued ...</div>
            </div>
            <div v-motion-slide-visible-top
                 class="relative box-border px-40 py-50 w-1100 h-500PX rounded-40 mx-3 bg-[#f1f1f1ff]">
              <div class="text-20 font-200 ma font-[openSans]">Write At The ➜ End</div>
              <div class="h210 overflow-scroll scroll-bar line-height-30 text-16 mt-8 font-[openSans]">
                Should you find yourself here, I offer my profound gratitude. 🙇‍
                <br>Whether you're curious about me or astounded by the trials my journey has seen, the future holds
                much 😊.
                <br>While I acknowledge that I am yet to reach the pinnacle of maturity as a software engineer, my
                journey of striving has not ceased.🐾🐾🐬
                <br>Despite the current scarcity in my life and my spiritual world, it is indeed an awe-inspiring act to
                persevere in what brings me such passion, is it not?🦈
              </div>
              <!-- 更多关于我的地方 可以点击看看 -->
              <div class="text-20 font-200 text-center ma font-[openSans] bt-1px_solid_#000 pt-10">For More Information
                about Me, You Try To Click ➜➜
              </div>
              <div class="h-140 w-full flex justify-around items-center">
                <div class="w-120 h-120 bd-1px_solid_#aaa rounded-8 hover:bd-1px_solid_#000 cursor-pointer transition">
                  Incomplete ...
                </div>
                <div class="w-120 h-120 bd-1px_solid_#aaa rounded-8 hover:bd-1px_solid_#000 cursor-pointer transition">
                  Incomplete ...
                </div>
                <div class="w-120 h-120 bd-1px_solid_#aaa rounded-8 hover:bd-1px_solid_#000 cursor-pointer transition">
                  Incomplete ...
                </div>
                <div class="w-120 h-120 bd-1px_solid_#aaa rounded-8 hover:bd-1px_solid_#000 cursor-pointer transition">
                  Incomplete ...
                </div>
                <div class="w-120 h-120 bd-1px_solid_#aaa rounded-8 hover:bd-1px_solid_#000 cursor-pointer transition">
                  Incomplete ...
                </div>
                <div class="w-120 h-120 bd-1px_solid_#aaa rounded-8 hover:bd-1px_solid_#000 cursor-pointer transition">
                  Incomplete ...
                </div>
                <div class="w-120 h-120 bd-1px_solid_#aaa rounded-8 hover:bd-1px_solid_#000 cursor-pointer transition">
                  Incomplete ...
                </div>
                <div class="w-120 h-120 bd-1px_solid_#aaa rounded-8 hover:bd-1px_solid_#000 cursor-pointer transition">
                  Incomplete ...
                </div>
              </div>
            </div>
            <div class="relative box-border p-80 w-100 h-600PX bg-#f9fafb/0"></div>
          </div>
        </div>
      </section>
    </div>
    <!--  Other  -->
    <div id="other"></div>

    <div class="h200"></div>
    <!-- bottom background-->
    <div class="h200 -mt-200 -z-10 w100% relative bg-bottom dark:bg-bottom-dark"></div>
  </div>
</template>
<style>
:root {
  --bg-rgba-left: rgba(225, 220, 248, 0.4);
  --bg-rgba-right: rgba(251, 230, 231, 0.3);
}

html {
  scroll-behavior: smooth;
}

.scroll-bar {
  overflow-x: scroll;
}

.scroll-bar::-webkit-scrollbar-button {
  display: none;
}

.scroll-bar::-webkit-scrollbar {
  width: 2px;
  background-color: rgba(255, 255, 255, 0); /* or add it to the track */
}

.scroll-bar::-webkit-scrollbar-thumb {
  background: rgba(136, 136, 136, 0.5);
}

.animation {
  transition: all 0.4s;
}

.leftMoHu {
  background: linear-gradient(90deg, #f9fafb, rgba(204, 204, 204, 0));
}
</style>
